<template>
  <glsx-dialog :show="value" :title="id ? '编辑账号' : '新增账号'" @close="closeDialog">
    <el-form ref="addForm" class="add_hospital_form" size="small" :model="addForm" :rules="addFormRules"
      label-width="100px">
      <el-form-item label="选择医院：" prop="departmentId">
        <!-- <hospital-select v-model="addForm.departmentId"></hospital-select> -->
        <el-select v-model="addForm.departmentId" filterable>
          <el-option v-for="(item, index) in hospitalList" :key="index" :value="item.id" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名：" prop="username">
        <el-input v-model.trim="addForm.username" />
      </el-form-item>
      <el-form-item label="登录手机：" prop="account">
        <el-input v-model.trim="addForm.account" maxlength="11" show-word-limit />
      </el-form-item>
      <el-form-item label="登录密码：" prop="password">
        <el-input type="password" v-model.trim="addForm.password" maxlength="20" show-word-limit />
      </el-form-item>
      <el-form-item label="确认密码：" prop="password2">
        <el-input type="password" v-model.trim="addForm.password2" maxlength="20" show-word-limit />
      </el-form-item>
      <el-form-item label="预约时间：" prop="limitDate">
        <el-date-picker v-model="addForm.limitDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="账号状态：">
        <el-radio-group v-model="addForm.enableStatus">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" size="small" @click="saveInfo">保存</el-button>
      <el-button type="default" size="small" @click="closeDialog">取消</el-button>
    </div>
  </glsx-dialog>
</template>
<script>
import { deepClone, showToast } from "@/common/util";
import { ADDUSERINFO, GETUSERINFO, GETORGANIZATIONTREE, EDITUSERINFO } from '@/http/system'
import {GET_ORGANIZATION_FULLORGTREE} from '@/http/finance'
export default {
  name: 'AddAcount',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: ''
    }
  },
  watch: {
    id: {
      handler: function (n, o) {
        if (n) {
          console.log(n)
          console.log(o)
          delete this.addFormRules.password
          delete this.addFormRules.password2
          this.getInfo(n)
        }
      },
      immediate: true
    }
  },
  data() {
    var checkPassword = (rule, value, callback) => {
      console.log(this.addForm)
      if (value !== this.addForm.password) {
        callback(new Error('两次密码输入不一致'));
      } else {
        callback();
      }
    }
    return {
      addForm: { enableStatus: 1 },
      addFormRules: {
        departmentId: [{ required: true, message: "请选择医院", trigger: "change" }],
        username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        account: [
          { required: true, message: "请输入登录手机", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { max: 18, min: 6, message: "请输入6-18位的密码", trigger: "blur" },
        ],
        password2: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { max: 18, min: 6, message: "请输入6-18位的密码", trigger: "blur" },
          { validator: checkPassword, trigger: 'blur' }
        ],
        limitDate:[
        { required: true, message: "请选择预约时间", trigger: "change" },
        ],
        enableStatus: [
          { required: true, message: "请选择账号状态", trigger: "change" },
        ],
      },
      loading: false,
      originData: {},
      hospitalList: []
    };
  },
  created() {
    this.getOrganization()
  },
  mounted() {

  },
  methods: {

    // 新增医院
    saveInfo() {
      const _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }

        const oParams = deepClone(_this.addForm);
        oParams.type = 'b'
        delete oParams.password2;
        //oParams.id = _this.$route.query.id;
        _this.loading = true;

        // 编辑医院
        if (_this.id) {
          oParams.id = _this.id
          EDITUSERINFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.$emit('input', false);
              _this.$emit('change', true);
            }
          });
          return false;
        }

        console.log(oParams);
        ADDUSERINFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.$emit('input', false);
            _this.$emit('change', true);
          }
        });
      });
    },

    // 获取医院详情
    getInfo(id) {
      GETUSERINFO({ id: id }).then((res) => {
        const o = res.data || {};
        let options = {}
        options.departmentId = o.departmentId.toString()
        options.username = o.username
        options.account = o.account
        options.enableStatus = o.enableStatus
		options.limitDate = o.limitDate
        this.addForm = options;
        this.originData = o;
        console.log(this.addForm);
      });
    },

    // 关闭弹框
    closeDialog() {
      this.$emit('input', false)
      this.$emit('change', false)
    },

    // 获取一级组织机构
    getOrganization() {
      GET_ORGANIZATION_FULLORGTREE().then((res) => {
        let list = res.data || [];
        this.hospitalList = list[1] ? list[1].children : [];
      });
    },

  },
};
</script>
<style lang="scss">
.add_hospital_form {
  .a_select {
    width: 100%;
  }
}
</style>
<style lang="scss" scoped>
.page {
  background: #fff;
  border-radius: 6px;
  padding: 0 16px;
  overflow: hidden;
}

.title {
  font-size: 20px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: bold;
  color: #000000;
  margin: 24px 0;
}

.base_info {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    flex: 0 0 50%;
  }
}

.show_tips {
  display: flex;
  line-height: 1.8;
  margin: 10px 0;

  .name {
    flex-shrink: 0;
  }

  .txt {
    flex: 1;

    .cred {
      color: #f00;
    }
  }
}
</style>
